<template>
  <view class="today-page">
    <view class="header-section">
      <text class="current-date">{{ currentDate }}</text>
      <text class="greeting">今日美食推荐</text>
    </view>

    <!-- 精选菜谱 -->
    <view class="featured-section">
      <view class="featured-card" @click="goToDetail(featuredRecipe.id)">
        <view class="featured-image-wrapper">
          <image :src="featuredRecipe.cover_image" mode="aspectFill" class="featured-image"></image>
          <view class="recipe-name-overlay">
            <text class="recipe-name">{{ featuredRecipe.title }}</text>
          </view>
          <view class="recipe-stats">
            <view class="stat-item">
              <uni-icons type="time" size="20" color="#fff"></uni-icons>
              <text>{{ featuredRecipe.cook_time }}分钟</text>
            </view>
            <view class="stat-item">
              <uni-icons type="rank" size="20" color="#fff"></uni-icons>
              <text>{{ featuredRecipe.difficulty }}</text>
            </view>
          </view>
        </view>
        <view class="recipe-description">
          <text>{{ featuredRecipe.description }}</text>
        </view>
      </view>
    </view>

    <!-- 今日三餐 -->
    <view class="daily-meals-section">
      <view class="section-header">
        <text class="section-title">今日三餐</text>
      </view>
      
      <!-- 整合为一个整体卡片，中间用竖线分隔 -->
      <view class="meals-combined-card">
        <view class="meal-item" v-for="(meal, index) in dailyMeals" :key="index" @click="goToDetail(meal.id)">
          <!-- 卡片头部：图片和餐别 -->
          <view class="meal-image-container">
            <image :src="meal.cover_image" mode="aspectFill" class="meal-image"></image>
            <view class="meal-type-badge" :class="meal.type.toLowerCase()">
              {{ meal.type }}
            </view>
          </view>
          
          <!-- 卡片内容：菜名和元信息 -->
          <view class="meal-content">
            <text class="meal-name">{{ meal.title }}</text>
            <view class="meal-meta">
              <view class="meta-item">
                <uni-icons type="time" size="16" color="#666"></uni-icons>
                <text>{{ meal.cook_time }}分钟</text>
              </view>
              <view class="meta-item">
                <uni-icons type="rank" size="16" color="#4caf50"></uni-icons>
                <text>{{ meal.difficulty }}</text>
              </view>
            </view>
          </view>
          
          <!-- 竖线分隔符，除了最后一个元素 -->
          <view class="meal-divider" v-if="index < dailyMeals.length - 1"></view>
        </view>
      </view>
    </view>

    <!-- 烹饪小贴士 -->
    <view class="cooking-tip-section">
      <view class="tip-card">
        <uni-icons type="lightbulb" size="32" color="#ff9800" class="tip-icon"></uni-icons>
        <view class="tip-content">
          <text class="tip-title">烹饪小贴士</text>
          <text class="tip-text">{{ cookingTip }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {getTodayRecipe, getTodayRecipeThree} from '/apis/index.js'

// 路由实例
const router = useRouter();

// 获取当前日期
const currentDate = computed(() => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
  const weekday = weekdays[now.getDay()];
  return `${year} 年 ${month} 月 ${day} 日  星期${weekday}`;
});

// 精选菜谱数据
const featuredRecipe = ref({
  id: '',
  title: '',
  description: '',
  cover_image: '',
  cook_time: 0,
  difficulty: '',
  category: {
    id: '',
    name: '',
    description: '',
    children: []
  },
  comments: [],
  ingredients: [],
  steps: [],
  tags: [],
  servings: 0,
  created_at: '',
  updated_at: ''
});

// 今日三餐数据
const dailyMeals = ref([]);

// 页面加载自动获取
onMounted(async()=>{
  try{
    await Promise.all([
      getTodayRecipeData(),
      getTodayRecipeThreeData()
    ])
  }catch(err){
    console.log("数据加载失败：", err)
  }
})

// 获取单个随机菜谱数据
const getTodayRecipeData = async() => {
  try {
    const data = await getTodayRecipe();
      featuredRecipe.value = data;
  }catch(err) {
    console.log("获取随机菜谱失败：", err)
  }
}

// 获取三个随机菜谱数据
const getTodayRecipeThreeData = async() => {
  try {
    const data = await getTodayRecipeThree();
      const mealTypes = ['早餐', '午餐', '晚餐'];
      dailyMeals.value = data.map((recipe, index) => ({
        ...recipe,
        type: mealTypes[index % mealTypes.length]
      }));
  }catch(err){
    console.log("获取三个随机菜谱失败：", err)
  }
}

// 烹饪小贴士
const cookingTip = ref('烹饪肉类时，先将肉块用厨房纸巾擦干水分，可以让肉表面煎得更金黄酥脆，锁住内部的鲜嫩多汁。')

// 进入菜谱详细页
const goToDetail = (id) => {
	uni.navigateTo({
		url:`/pages/detail/detail?id=${id}`
	})
}

</script>

<style lang="scss" scoped>
// 全局样式变量
$primary-color: #4caf50;
$primary-dark: #2e7d32;
$primary-light: #81c784;
$background-gradient: linear-gradient(135deg, #f8f9fa 0%, #f1f8e9 100%);
$card-radius: 28rpx;
$shadow-light: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
$spacing-sm: 16rpx;
$spacing-md: 24rpx;
$spacing-lg: 32rpx;

/* 全局样式 */
.today-page {
  // background: $background-gradient;
  min-height: 100vh;
  padding: $spacing-lg;
  box-sizing: border-box;
}

/* 顶部日期区域 */
.header-section {
  text-align: center;
  margin-bottom: 40rpx;
  padding: 20rpx 0;
}

.current-date {
  display: block;
  font-size: 26rpx;
  color: #ea6262;
  margin-bottom: 10rpx;
  font-weight: 500;
}

.greeting {
  display: block;
  font-size: 44rpx;
  font-weight: bold;
  color: #ff6b6b;
  letter-spacing: 2rpx;
}

/* 通用区块头部 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $spacing-md;
  padding: 0 10rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  position: relative;
  padding-left: 15rpx;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 38rpx;
  background: #ff6b6b;
  // background: linear-gradient(to bottom, $primary-color, $primary-light);
  border-radius: 3rpx;
}

.section-more {
  font-size: 26rpx;
  color: $primary-color;
  font-weight: 500;
  transition: color 0.2s ease;
}

.section-more:active {
  color: $primary-dark;
}

/* 精选菜谱样式 */
.featured-section {
  margin-bottom: 50rpx;
}

.featured-card {
  background: #fff;
  border-radius: $card-radius;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.featured-card:active {
  transform: translateY(-2rpx);
}

.featured-image-wrapper {
  position: relative;
  height: 420rpx;
  overflow: hidden;
}

.featured-image {
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.featured-card:active .featured-image {
  transform: scale(1.03);
}

/* 图片遮罩渐变 */
.featured-image-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.recipe-name-overlay {
  position: absolute;
  bottom: 80rpx;
  left: 30rpx;
  z-index: 2;
}

.recipe-name {
  color: #fff;
  font-size: 40rpx;
  font-weight: bold;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
}

.recipe-stats {
  position: absolute;
  bottom: 30rpx;
  left: 30rpx;
  right: 30rpx;
  display: flex;
  gap: 30rpx;
  z-index: 2;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #fff;
  font-size: 24rpx;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.3);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  backdrop-filter: blur(2px);
}

.recipe-description {
  padding: $spacing-lg;
}

.recipe-description text {
  font-size: 28rpx;
  color: #555;
  line-height: 44rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 今日三餐样式 */
.daily-meals-section {
  margin-bottom: 50rpx;
}

/* 整合后的整体卡片样式 */
.meals-combined-card {
  display: flex;
  background: #fff;
  border-radius: $card-radius;
  overflow: hidden;
  border: 1px solid #e8f5e9;
}

/* 单个餐项样式 */
.meal-item {
  flex: 1;
  position: relative;
  overflow: hidden;
  transition: background-color 0.2s ease;
}

.meal-item:active {
  background-color: #f8f8f8;
}

/* 图片容器样式 */
.meal-image-container {
  position: relative;
  height: 250rpx;
  overflow: hidden;
}

.meal-image {
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.meal-item:active .meal-image {
  transform: scale(1.03);
}

/* 餐别标签样式 */
.meal-type-badge {
  position: absolute;
  top: 16rpx;
  left: 16rpx;
  padding: 6rpx 16rpx;
  border-radius: 16rpx;
  color: #fff;
  font-size: 22rpx;
  font-weight: bold;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

.meal-type-badge.早餐 {
  background: linear-gradient(135deg, #ff9800, #ff5722);
}

.meal-type-badge.午餐 {
  background: linear-gradient(135deg, $primary-color, $primary-light);
}

.meal-type-badge.晚餐 {
  background: linear-gradient(135deg, #2196f3, #03a9f4);
}

/* 卡片内容区域 */
.meal-content {
  padding: 20rpx 24rpx 24rpx 24rpx;
}

/* 菜名样式 */
.meal-name {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 40rpx;
}

/* 元数据样式 */
.meal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8rpx 0;
  border-top: 1px solid #f0f0f0;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6rpx;
  font-size: 22rpx;
  color: #666;
}

/* 时间图标颜色 */
.meta-item:first-child .uni-icons {
  color: #666 !important;
}

/* 难度图标颜色 */
.meta-item:last-child .uni-icons {
  color: $primary-color !important;
}

/* 竖线分隔符样式 - 增强版本 */
.meal-divider {
  position: absolute;
  right: 0;
  top: 15%;
  bottom: 15%;
  width: 2px;
  background-color: #e0e0e0;
  box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.05);
}

.tip-card {
  background: linear-gradient(135deg, #fff9c4, #fff59d);
  border-radius: $card-radius;
  padding: $spacing-lg;
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
  transition: transform 0.2s ease;
}

.tip-card:active {
  transform: scale(0.99);
}

.tip-icon {
  flex-shrink: 0;
  margin-top: 4rpx;
}

.tip-content {
  flex: 1;
}

.tip-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #f57c00;
  margin-bottom: 12rpx;
}

.tip-text {
  display: block;
  font-size: 26rpx;
  color: #6d4c41;
  line-height: 42rpx;
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 应用动画到各个区块 */
.featured-card, .meals-combined-card, .tip-card {
  animation: fadeInUp 0.5s ease-out;
}

/* 餐项单独设置动画 */
.meal-item {
  animation: fadeInUp 0.5s ease-out;
}

.meal-item:nth-child(2) {
  animation-delay: 0.1s;
}

.meal-item:nth-child(3) {
  animation-delay: 0.2s;
}

.tip-card {
  animation-delay: 0.3s;
}

/* 统一的响应式调整 */
@media screen and (max-width: 320px) {
  .today-page {
    padding: 20rpx;
  }
  
  .greeting {
    font-size: 38rpx;
  }
  
  .featured-image-wrapper {
    height: 350rpx;
  }
  
  .featured-image-wrapper::after {
    height: 180rpx;
  }
  
  .recipe-name {
    font-size: 36rpx;
  }
  
  .meal-image-container {
    height: 200rpx;
  }
  
  .meal-content {
    padding: 16rpx 20rpx 20rpx 20rpx;
  }
  
  .meal-name {
    font-size: 26rpx;
    margin-bottom: 10rpx;
  }
  
  .meta-item {
    font-size: 20rpx;
    gap: 4rpx;
  }
  
  .meal-divider {
    top: 15%;
    bottom: 15%;
  }
  
  .tip-card {
    padding: 24rpx;
    gap: 16rpx;
  }
  
  .tip-text {
    font-size: 24rpx;
    line-height: 38rpx;
  }
}

/* 针对中等屏幕的优化 */
@media screen and (min-width: 321px) and (max-width: 375px) {
  .featured-image-wrapper {
    height: 380rpx;
  }
  
  .meal-image-container {
    height: 220rpx;
  }
}

/* 确保所有卡片组件的统一样式 */
.featured-card, .meals-combined-card, .tip-card {
  border-radius: $card-radius;
}

/* 增强页面的触摸反馈 */
.featured-card, .meal-item, .section-more, .tip-card {
  -webkit-tap-highlight-color: transparent;
}
</style>